<template>
	<z-box>
		<z-title name="关系图 graph"></z-title>
		<z-chart :option="option" style="width: 100%; height: 600px; margin-top: 10px;"></z-chart>
	</z-box>
</template>

<script>
// import * as echarts from 'echarts'
import graph from './graph-data.js'

export default {
  data () {
    return {
      option: {}
    }
  },
  mounted () {
    this.setOption()
  },
  methods: {
    setOption() {
      const symbols = [
        'image://',
        'image://',
        'image://',
        'image://',
        'image://',
        'image://',
        'image://'
      ]
      graph.nodes[0].symbol = symbols[0]
      graph.nodes[11].symbol = symbols[1]
      graph.nodes[23].symbol = symbols[2]
      graph.nodes[29].symbol = symbols[3]
      graph.nodes[25].symbol = symbols[4]
      graph.nodes[27].symbol = symbols[4]
      graph.nodes[48].symbol = symbols[5]
      graph.nodes[55].symbol = symbols[6]

      this.option = {
        tooltip: {
          // formatter: function(params) {
          //   const categories = [
          //     { name: 'IMSI', desc: '4564321553634255434313' },
          //     { name: '姓名', desc: '张某' },
          //     { name: 'MAC', desc: '483CAD25565543' },
          //     { name: '车牌', desc: '/' },
          //     { name: 'WIFI', desc: '/' },
          //     { name: 'ETC', desc: '/' },
          //     { name: 'IMEI', desc: '/' }
          //   ]
          //   return `${categories[params.data.category].name}：${categories[params.data.category].desc}<br>`
          // }
        },
        color: ['#1B4BFF', '#6C62FF', '#0FF3BE', '#00C713', '#FF9B15', '#46F1F2', '#00C9C2'],
        legend: [{
          right: 20,
          bottom: 20,
          orient: 'vertical', // 'horizontal',
          itemWidth: 25,
          itemHeight: 25,
          lineStyle: 25,
          data: graph.categories.map(function(a, i) {
            return {
              name: a.name,
              icon: symbols[i]
            };
          })
        }],
        series: [{
          name: 'Les Miserables',
          type: 'graph',
          layout: 'none',
          data: graph.nodes,
          links: graph.links,
          categories: graph.categories,
          roam: true,
          label: {
            show: true,
            position: 'right',
            formatter: '' // '{b}'
          },
          labelLayout: {
            hideOverlap: true
          },
          scaleLimit: {
            min: 0.4,
            max: 2
          },
          lineStyle: {
            color: 'source',
            curveness: 0.3
          }
        }]
      }
    }
  }
}
</script>

<style>

</style>